<!-- 欢迎弹窗组件 -->
<div id="welcomeModal" class="welcome-modal-overlay" style="display: none;">
    <div class="welcome-modal-content">
        <button id="closeModal" class="welcome-modal-close">×</button>
        <div class="welcome-modal-message">
            <h3>花间村会员全场满60元包邮</h3>
            <p>立即登录享受更多会员权益</p>
        </div>
    </div>
</div>

<style>
.welcome-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.welcome-modal-content {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.welcome-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-modal-close:hover {
    background-color: #f0f0f0;
    color: #333;
}

.welcome-modal-message h3 {
    margin: 20px 0 10px 0;
    font-size: 20px;
    color: #333;
}

.welcome-modal-message p {
    margin: 10px 0 20px 0;
    color: #666;
    font-size: 16px;
}
</style>

<script>
// 检查用户是否未登录且弹窗未显示过
function checkAndShowModal() {
    // 检查是否已登录
    const isLoggedIn = {{ Auth::check() ? 'true' : 'false' }};
    
    if (!isLoggedIn) {
        // 显示弹窗
        const modal = document.getElementById('welcomeModal');
        modal.style.display = 'flex';
    }
}

// 关闭弹窗功能
function setupModalClose() {
    const closeButton = document.getElementById('closeModal');
    const modal = document.getElementById('welcomeModal');
    
    closeButton.addEventListener('click', function() {
        modal.style.display = 'none';
    });
    
    // 点击遮罩层也可以关闭弹窗
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.style.display = 'none';
        }
    });
    
    // 按ESC键关闭弹窗
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.style.display === 'flex') {
            modal.style.display = 'none';
        }
    });
}

// 页面加载完成后执行
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        setupModalClose();
        checkAndShowModal();
    });
} else {
    setupModalClose();
    checkAndShowModal();
}
</script>